<template>
  <div id="app">
    <router-view />
    <el-dialog :visible="open" title="系统到期提醒" width="800px" :show-close="false">

      <!-- <p style="display: flex;align-items: center;">
         <i class="el-icon-warning" style="color: #f56c6c;font-size: 26px;"></i>
        <label style="color:#f56c6c;font-size: 16px;margin-left:10px;">尊敬的用户您好，系统已到期，请联系管理员！！！</label>
      </p> -->

      <table class="custom-table">
        <tr>
          <td class="tr-title">系统警告</td>
          <td>
        <label style="color:#f56c6c;font-size: 16px;">尊敬的用户您好，系统已到期，请联系管理员！！！</label>
          </td>
        </tr>
        <tr>
          <td class="tr-title">mac地址：</td>
          <td>{{ macAddress }}</td>
        </tr>
        <tr>
          <td class="tr-title">识别码：</td>
          <td><el-input type="textarea" :rows="6" v-model="licenseVal"></el-input></td>
        </tr>
      </table>

      <template #footer>
        <el-button type="primary" @click="submitVal">提交</el-button>
      </template>

    </el-dialog>
  </div>
</template>

<script>
import { eventBus } from "@/utils/eventBus";
import { saveLicense,getLicenseInfo } from '@/api/supplier_api'
export default {
  name: 'App',
  data() {
    return {
      open: false,
      macAddress: '',
      licenseVal:''
    }
  },
  created() {
    eventBus.$on('customEvent', (msg) => {
      this.handleOpen()
    });
  },
  methods: {
    handleOpen() {
      this.licenseVal = ''
      getLicenseInfo().then(res => {
        this.macAddress = res?.data?.macAddress ?? '刷新页面重获识别码或联系管理员获取识别码！'
          this.open = true;
      })
    },
    submitVal() {
      if (!this.licenseVal) {
        this.$message.error('请输入识别码！');
        return;
      }
      let params = {}
      params.key = "license"
      params.value = this.licenseVal
      saveLicense(params).then(res => {
        if (res.code == 200) {
          this.$message.success('系统已激活，请登录使用！');
          this.open = false;
        }
      })
    }
  }
}
</script>
<style>

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background-color:#ebeef5}
::-webkit-scrollbar-thumb{border-radius:5px;background-color:#174F7F;box-shadow:inset 0 0 5px #174F7F}
::-webkit-scrollbar-button{height:0;background-color:#dddedf}
/*
#app ::-webkit-scrollbar {
  width: 2px;
  height: 10px;
}
/
/*定义滚动条轨道 内阴影+圆角 13325C  scoped*/
/*
#app ::-webkit-scrollbar-track {
  background-color: #ebeef5;
}
/
/*定义滑块 内阴影+圆角*/
/*
#app ::-webkit-scrollbar-thumb {
  background-color: #409EFF;
  border-radius: 10px;
}
*/
.file-hot{
  overflow: hidden;
}
.warpper-box{
  background: #fff;
  min-height: calc(100vh - 125px);
}
.inner_box{
  background: #fff;
  padding: 15px;
}
.page-footer{
  padding: 15px;
  text-align: right;
}
.el-left{
  text-align: left;
}
.el-center{
  text-align: center;
}
.el-right{
  text-align: right;
}
.margin-btm{
  margin-bottom: 10px;
}
.font-span{
  color: #999;
}
.font-red{
  color: #f56c6c;
}
.font-orange{
  color: orange;
  color: #FF9800;
}
.font-blue{
  color: #409eff;
}
.font-green{
  color: #67c23a;
}
.font-blue{
  color: #409EFF;
}
.card-label{
  line-height: 32px;
  display: inline-block;
  font-size: 18px;
}
.card-h3{
  margin: 0px;
  display: inline-block;
  line-height: 28px;
}
.el-tabs__item {
    color: #000 !important;
}
.el-tabs__item.is-active {
    color: #409EFF !important;
}
.el-table th{
  color: rgba(0,0,0,.85) !important;
    font-weight: 500 !important;
    text-align: left !important;
    background: #fafafa !important;
    border-bottom: 1px solid #e8e8e8 !important;
    transition: background .3s ease !important;
}

.badge{
  z-index: 999;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  color: #fff;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  text-align: center;
  background: #ff4d4f;
  border-radius: 10px;
  position: absolute;
  top: 0;
  right: 0;
}
/*弹出框 */
.el-dialog__header{
  border-bottom: 1px solid #f0f0f0;
}
.el-dialog__footer {
    padding: 10px 20px 10px !important;
    border-top: 1px solid #f0f0f0;
}
/*鼠标移入*/
.el-popover{
  width: 400px;
}

/*table fixed高度自适应问题 */
.table-fixed .el-table__fixed-right{
    height: 100% !important;
}
.table-fixed .el-table__fixed{
    height: 100% !important;
}
/* 自定义*/
.custom-table tr td { border:1px solid #f0f0f0;color: rgba(0,0,0,.85);font-weight: normal;
    font-size: 14px;padding: 15px 15px; }
.custom-table { min-height: 25px; width: 100%; text-align: left; border-collapse: collapse;table-layout: fixed;}
.tr-title{
  background-color: #fafafa;
  width: 150px;
}

.link-box{
  text-decoration: underline;
  color: #409EFF;
  cursor: pointer;
}

/*card*/
.box-card{
  margin-bottom:10px;
}
/* switch按钮样式 */
.switch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff !important;
}
/*打开时文字位置设置*/
.switch .el-switch__label--right {
    z-index: 1;
}
/* 调整打开时文字的显示位子 */
.switch .el-switch__label--right span{
    margin-left: 15px;
}
/*关闭时文字位置设置*/
.switch .el-switch__label--left {
    z-index: 1;
}
/* 调整关闭时文字的显示位子 */
.switch .el-switch__label--left span{
    margin-left: 27px;
}
/*显示文字*/
.switch .el-switch__label.is-active {
    display: block;
}
/* 调整按钮的宽度 */
.switch.el-switch .el-switch__core,
.el-switch .el-switch__label {
     width: 70px !important;
     margin: 0;
}
/*覆盖菜单选中样式*/
.el-menu-item.is-active {
    background: rgb(64,158,255,0.3);
}

/*radio 选中问题*/
.radioClass .el-radio__label{
  display: none;
}

/** el-card title */
.front-title {
  font-weight: bold;
  display: inline-block;
  font-size: 18px;
}

/* 富文本链接 */
.web-footer-inner a {
    color: #fff !important;
}
.ql-snow a:hover{
  text-decoration: underline;
}

/**预览图片 */
.previcew-img{
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/**dialog 内容自适应 */
.scrollable-dialog .el-dialog__body {
  max-height: calc(100vh - 148px);
  overflow-y: auto;
  overflow-x: hidden;
}
.scrollable-dialog{
  margin-top: 20px !important;
  margin-bottom: 20px;
}

.custom-age-column .cell{
  padding-right: 0;
  padding-left: 0;
}



/* 自定义选中节点的背景颜色和文字颜色 */
.el-tree-node.is-current > .el-tree-node__content span {
  color: #409EFF !important; /* 自定义背景颜色 */
}

</style>